#include("/front/teacher/_layout.html")
#@layout()
#define layoutImportcss()
#end
#define layoutHead()
	<title>考勤管理</title>
	<style>
		.ckbox-name{margin-left: 10px;}
		
.div_calendar {
    width: 330px;
    margin: 0 auto;
    text-align: center;
    display: -webkit-box;
    font-family: Arial;
    font-size: 20px;
    background: #fff;
}

/** 日历标题 */
.div_calendar_title {
    width: 95%;
    margin: 0 auto;
    text-align: center;
}

/** 日历主体 */
.div_calendar_body {
    width: 330px;
    margin: 0 auto;
    text-align: center;
}

/** 日元素 */
.div_calendar span {
    width: 14%;
    display: inline-block;
    text-align: center;
    line-height: 50px;
}

/** 没有记录 */
.div_calendar span.no {
    color: #cbcbcb;
}

/** 正常 */
.div_calendar span. {
    color: #8ecda9;
}

/** 缺勤 */
.div_calendar span.normal {
    color: #8ecda9;
}

/** 缺勤 */
.div_calendar span.absense {
    color: #bfbfbf;
}

/** 当前日期 */
.div_calendar span.today {
    /*border-radius: 50%;
    background: #8ecda9;*/
	color: blue;
}

/** 选中 */
.div_calendar span.select {
    /*border-radius: 50%;
    background: #39ac6a;*/
	color: blue;
}

/** 出勤 */
.div_calendar span.attandence {
    border-radius: 50%;
    background-color: #4BDAB9;
}
/** 事假 */
.div_calendar span.matterleave {
    border-radius: 50%;
    background-color: #DE3E35;
}
/** 病假 */
.div_calendar span.sickleave {
    border-radius: 50%;
    background-color: #F37B1D;
}

/** 日历第一行日期 */
.div_calendar .first_div {
    text-align: right;
}

/** 日历末行日期 */
.div_calendar .last_div {
    text-align: left;
}

/** 日期显示div */
.div_calendar .div_currentDate {
    text-align: right;
}

.div_calendar .changeDate {
    cursor: pointer;
}

.div_calendar .div_currentDate span {
    width: inherit;
}

.div_calendar .div_currentDate span em {
    margin: 5px;
}

.div_target_label {
    width: 330px;
    margin: 20px auto;
    text-align: right;
}

.div_changeMonth {
    margin: auto auto;
    text-align: center;
}

.div_changeMonth span {
    cursor: pointer;
}

.div_changeMonth span:last-child {
    margin-left: 20px;
}

	.day-n>span {
			background-color:#ff0000 !important;
			color:#fff !important;
		}
		.day-y>span {
			background-color:#5aadff !important;
			color:#fff !important;
		}
	.demo-card-header-pic .card-header {
	  height: 40vw;
	  background-size: cover;
	  background-position: center;
	  color: #fff;
	}
	.demo-card-header-pic .card-leave {
	  color: #8e8e93;
	  font-size: 14px;
	  margin: 5px auto;
	}
	.demo-card-header-pic .card-content-padding .date{
	  color: #8e8e93;
	}
	</style>
#end
#define layoutHome()


<div class="page-content hide-navbar-on-scroll calltheroll-page-content">
	<div class="navbar">
		<div class="navbar-inner toolbstyle">
			<div class="left">
				<a id="a_back" class="link external back" href="javascript:window.location.href='/front/teacher/html/index'">
					<i class="icon icon-back"></i>
				</a>
			</div>
			<div class="title">班级考勤</div>
			<div class="right">
				<a class="button buttonw font-color-yellow open-confirm" href="javascript:;">提交</a>
			</div>
		</div>
	</div>
	<!--二级导航栏-->
		<div class="secnavbar">
			<div class="secnavbar-inner">
				<a class="tabs-link tabs-link-active" href="#"><span>入园点名</span></a>
				<a class="tabs-link" href="#"><span>离园提醒</span></a>
				<a class="tabs-link" href="#"><span>考勤记录</span></a>
			</div>
		</div>

	<div class="tabs">
	  <div class="tab tab-active" id="tab1">
		<div class="tab-box">
			<div class="tab-line">
				<div class="tab-line-master">
					<label class="checkbox"><input type="checkbox" name="uncall_all"><i class="icon-checkbox"></i></label><label class="ckbox-name">全选出勤</label>
				</div>
				<div class="tab-line-slave color-cyan">出勤</div>
				<div class="tab-line-slave color-light-red">事假</div>
				<div class="tab-line-slave color-orange">病假</div>
			</div>
		</div>
		<div class="tab-box uncall_div" id="uncall_div">
			
		</div>
		<div class="tab-box called_div" id="called_div">
			
		</div>
		<div class="tab-box nocall_div" id="nocall_div">
			
		</div>
	  </div>
	  <!-- 离园提醒 -->
	  <div class="tab" id="tab2" style="display: none;">
		<div class="tab-box">
			<div class="tab-line">
				<div class="tab-line-master">
					<label class="checkbox"><input type="checkbox" name="unleave_all"><i class="icon-checkbox"></i></label><label class="ckbox-name">全部离园</label>
				</div>
			</div>
		</div>
		<div class="tab-box unleave_div" id="unleave_div">
			
		</div>
	  </div>
	  <div class="tab" id="tab3" style="display: none;">
		<div class="block block-strong no-padding">
			<div id="calendar_div" class="div_calendar"></div>
		</div>
		<div class="card demo-card-header-pic">
			<div class="card-content card-content-padding">
				<p>
					<span class="title" id="roll_sum_title">本月考勤</span>
					<span class="date" style="float: right;" id="call_state_rate">出勤率：100%</span>
				</p>
				<p>
					<div class="row div_calendar">
						<div class="col-33"><span class="attandence call-state-1" style="color:#fff;width:50px;">-</span><div class="card-leave">出勤</div></div>
						<div class="col-33"><span class="matterleave call-state-2" style="color:#fff;width:50px;">-</span><div class="card-leave">事假</div></div>
						<div class="col-33"><span class="sickleave call-state-3" style="color:#fff;width:50px;">-</span><div class="card-leave">病假</div></div>
					</div>
				</p>
				<p>
					<div class="card-leave call-state-2-names">事假</div>
				</p
				<p>
					<div class="card-leave call-state-3-names">病假</div>
				</p
			</div>
		</div>
	  </div>
	</div>
</div>
#end
#define layoutImportjs()
#end
#define layoutScript()
<script type="text/javascript">
	var list_students;
	var list_rollcall;
	var call_stu_num = 0; // 参与考勤人数
	var now_date = new Date();
	var cur_date = formatDate(now_date.toString(), 'yyyy-MM-dd');
	
	var tab_index = 0;
	// tab 切换
	$$(".secnavbar .tabs-link").click(function(){
		tab_index = $$(this).index();
		$$(this).addClass("tabs-link-active").siblings().removeClass("tabs-link-active");
		$$("#tab" + (tab_index + 1)).show().siblings().hide();
		$$('.open-confirm').show();
		if (tab_index == 2){ 
			$$('.open-confirm').hide(); 
			countRollCall(list_rollcall);
		}
	});
	/**日期控件**/
	var monthNames = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
	var calendarInline = app.calendar.create({
	  containerEl: '#calendar_div',
	  value: [new Date()],
	  weekHeader: true,
	  monthNames: monthNames,
	  dayNamesShort: ['日', '一', '二', '三', '四', '五', '六'],
	  renderToolbar: function () {
		return '<div class="toolbar calendar-custom-toolbar no-shadow">' +
		  '<div class="toolbar-inner">' +
			'<div class="left">' +
			  '<a href="#" class="link icon-only"><i class="icon icon-back ' + (app.theme === 'md' ? 'color-black' : '') + '"></i></a>' +
			'</div>' +
			'<div class="center"></div>' +
			'<div class="right">' +
			  '<a href="#" class="link icon-only"><i class="icon icon-forward ' + (app.theme === 'md' ? 'color-black' : '') + '"></i></a>' +
			'</div>' +
		  '</div>' +
		'</div>';
	  },
	  on: {
		init: function (c) {
		  $$('.calendar-custom-toolbar .center').text(c.currentYear + '年 ' + monthNames[c.currentMonth]);
		  $$('.calendar-custom-toolbar .left .link').on('click', function () {
			calendarInline.prevMonth();
		  });
		  $$('.calendar-custom-toolbar .right .link').on('click', function () {
			calendarInline.nextMonth();
		  });
		  var d = new Date();
		  $$('#roll_sum_title').html(formatDate(d.toString(), 'M月dd日考勤'));
		},
		monthYearChangeStart: function (c) {
		  $$('.calendar-custom-toolbar .center').text(c.currentYear + '年 ' + monthNames[c.currentMonth]);
		},
		dayClick: function(calendar, dayEl, year, month, day){
			var strdate = year + '-' + (month+1) + '-' + day;
			$$('#roll_sum_title').html((month+1) + '月' + day + '日考勤');
			getCurentDayCall(strdate);
		}
	  }
	});
	/**日期控件**/
	function getStutentName(stu_id){
		var jone = list_students.filter(function (e) { return e.student_id == stu_id; });
		if (!isNull(jone) && jone.length>0){ return jone[0].student_name; }
		else return "";
	}
	// 获取指定日期考勤
	var bf_get_cur_day_call = false;
	function getCurentDayCall(cur_date){
		if (bf_get_cur_day_call) return;
		bf_get_cur_day_call = true;
		sendPost('/front/teacher/rollcall/getRollCall?'+Math.random(), {curdate: cur_date}, function(res){
			bf_get_cur_day_call = false;
			console.log(res);
			if (res.code == 200){
				countRollCall(res.list_rollcall);
			}else{
				alertMsg(res.msg);
			}
		});
	}
	function countRollCall(list_data){
		//console.log(list_data);
		var call_stus = 0;
		var all_stus = 0;
		// 出勤
		var rds = list_data.filter(function (e) { return e.roll_call_state == 1; });
		$$('.call-state-1').text(rds.length);
		call_stus = rds.length;
		all_stus = rds.length;
		// 事假
		rds = list_data.filter(function (e) { return e.roll_call_state == 2; });
		$$('.call-state-2').text(rds.length);
		all_stus += rds.length;
		var shtml = '事假：'
		for(var i=0; i<rds.length; i++){
			shtml += getStutentName(rds[i].student_id) + ' ';
		}
		$$('.call-state-2-names').html(shtml);
		// 事假
		rds = list_data.filter(function (e) { return e.roll_call_state == 3; });
		$$('.call-state-3').text(rds.length);
		all_stus += rds.length;
		shtml = '病假：'
		for(var i=0; i<rds.length; i++){
			shtml += getStutentName(rds[i].student_id) + ' ';
		}
		$$('.call-state-3-names').html(shtml);
		if (call_stus>0 && all_stus>0){
			$$('#call_state_rate').html('出勤率:'+(call_stus/all_stus*100)+'%');
		}else{
			$$('#call_state_rate').html('出勤率:0');
		}
		
	}
	// 提交考勤数据
	$$('.open-confirm').on('click', function () {
		var post_data = getPostData();
		var rolls = $$('input[value="1"]:checked');
		var title = '考勤提交', msg = '今日本班出勤人数为 '+rolls.length+'';
		if (tab_index == 1){
			title = '离园提醒';
			var leaves = $$('.unleave_div input:checked');
			msg = '本次离园人数为 ' + leaves.length;
		}
		app.dialog.confirm(msg + '，确定提交？', title, function () {
			post_data['tab_idx'] = tab_index;
			post_data['curdate'] = cur_date;
			console.log(post_data);
			sendPost('/front/teacher/rollcall/postRollCall', post_data, function(res){
				console.log(res);
				if (res.code == 200){
					list_rollcall = res.list_rollcall;
					bindTemplate();
				}else{
					alertMsg(res.msg);
				}
			});
		});
	});
	function getPostData(){
		if (tab_index == 0){
			
			var uncall_idvs = getSelectorData('.uncall_div input:checked');
			var nocall_idvs = getSelectorData('.nocall_div input');
			var change_idvs = '';

			$$('.called_div input:checked').each(function(){
				var id = $$(this).attr('data-id'), state = $$(this).val();
				var rds = list_rollcall.filter(function (e) { return e.student_id == id; });
				if (isBlank(rds) || rds.length==0 || rds[0].roll_call_state != state){
					change_idvs += id + ',' + state + ';';
				}
			});
			return { uncall_data:uncall_idvs, nocall_data:nocall_idvs, change_data:change_idvs};
			
		}else if (tab_index == 1){
			
			var unleave_idvs = getSelectorData('.unleave_div input:checked');
			return { unleave_data: unleave_idvs};
			
		}else if (tab_index == 2){
			
		}
	}
	function getSelectorData(expression){
		var idvs = '';
		$$(expression).each(function(){
			idvs += $$(this).attr('data-id') + ',' + $$(this).val() + ';';
		});
		return idvs;
	}
	// 全选点名
	$$('[name="uncall_all"]').on('change', function (e) {
		if (e.target.checked) {
			$$('.uncall_div input[value="1"]').prop('checked', true);
		} else {
			$$('.uncall_div input[value="1"]').prop('checked', false);
		}
	});
	// 全选离园
	$$('[name="unleave_all"]').on('change', function (e) {
		if (e.target.checked) {
			$$('.unleave_div input').prop('checked', true);
		} else {
			$$('.unleave_div input').prop('checked', false);
		}
	});
	// 初始化
	sendPost('/front/teacher/rollcall/getRollCall', {curdate: cur_date}, function(res){
		//console.log(res);
		if (res.code == 200){
			list_students = res.list_students;
			list_rollcall = res.list_rollcall;
			
			bindTemplate();
			countRollCall(list_rollcall);
		}else{
			alertMsg(res.msg);
		}
	});
	
	function bindTemplate(){
		var called_html = '';
		var uncall_html = '';
		var nocall_html = '';
		var unleave_html = '';
		
		call_stu_num =  list_students.length;
		for(var i=0; i<list_students.length; i++){
			var jdata = list_students[i];
			if (jdata.roll_call == 0){
				// 不参与考勤
				nocall_html += bindNoCall(jdata);
				call_stu_num--;
				
			}else if (list_rollcall.length == 0){
				// 未点名
				uncall_html += bindUnCall(jdata);
			}else{
				var list_stu_call = list_rollcall.filter(function (e) { return e.student_id == jdata.student_id; });
				if (!isBlank(list_stu_call)){
					
					// 刷选已点名
					var rows = list_stu_call.filter(function (e) { return e.roll_call_state>0 && e.roll_call_state<5; });
					if (!isBlank(rows) && rows.length>0){
						// 已点名
						called_html += bindCalled(jdata, rows[0]);
						
						if (rows[0].roll_call_state == 1){
							// 筛选未离园
							rows = list_stu_call.filter(function (e) { return e.roll_call_state == 5; });
							if (isBlank(rows) || rows.length == 0){
								// 已点名，未离园
								unleave_html += bindUnLeave(jdata);
							}
						}
					}
					
				}else{
					// 未点名
					uncall_html += bindUnCall(jdata);
				}
			}
		}
		if (isBlank(nocall_html)){ nocall_html = '<p class="white-message">没有不参与考勤的同学</p>'; }
		if (isBlank(called_html)){ called_html = '<p class="white-message">没有已点名的同学</p>'; }
		if (isBlank(uncall_html)){ uncall_html = '<p class="white-message">没有未点名的同学</p>'; }
		$$('#called_div').html('<h3>已点名</h3>'+called_html);
		$$('#uncall_div').html('<h3>未点名</h3>'+uncall_html);
		$$('#nocall_div').html('<h3>不参与考勤</h3>'+nocall_html);
		$$('#unleave_div').html('<h3>离园学生</h3>'+unleave_html);
	}
	
	function checkCalledState(state, called_state){
		if (state == called_state){ return 'checked'; }
		else return '';
	}
	
	function bindCalled(jdata, rd_call){
		var shtml = `
						<div class="tab-line">
							<div class="tab-line-master">
								<label class="checkbox">
								</label><label class="ckbox-name">${jdata.student_name}</label>
							</div>
							<div class="tab-line-slave color-cyan">
								<label class="radio"><input type="radio" name="called_${jdata.student_id}" data-id="${jdata.student_id}" ${checkCalledState(1, rd_call.roll_call_state)}  value="1"><i class="icon-radio"></i></label>
							</div>
							<div class="tab-line-slave color-light-red">
								<label class="radio"><input type="radio" name="called_${jdata.student_id}" data-id="${jdata.student_id}" ${checkCalledState(2, rd_call.roll_call_state)}  value="2"><i class="icon-radio"></i></label>
							</div>
							<div class="tab-line-slave color-orange">
								<label class="radio"><input type="radio" name="called_${jdata.student_id}" data-id="${jdata.student_id}" ${checkCalledState(3, rd_call.roll_call_state)}  value="3"><i class="icon-radio"></i></label>
							</div>
						</div>
					`;
		return shtml;
	}
	function bindUnCall(jdata){
		var shtml = `
						<div class="tab-line">
							<div class="tab-line-master">
								<label class="checkbox">
								</label><label class="ckbox-name">${jdata.student_name}</label>
							</div>
							<div class="tab-line-slave color-cyan">
								<label class="radio"><input type="radio" name="uncall_${jdata.student_id}" data-id="${jdata.student_id}" value="1"><i class="icon-radio"></i></label>
							</div>
							<div class="tab-line-slave color-light-red">
								<label class="radio"><input type="radio" name="uncall_${jdata.student_id}" data-id="${jdata.student_id}" value="2"><i class="icon-radio"></i></label>
							</div>
							<div class="tab-line-slave color-orange">
								<label class="radio"><input type="radio" name="uncall_${jdata.student_id}" data-id="${jdata.student_id}" value="3"><i class="icon-radio"></i></label>
							</div>
						</div>
					`;
		return shtml;
	}
	function bindNoCall(jdata){
		var shtml = `
						<div class="tab-line">
							<div class="tab-line-master">
								<label class="checkbox">
									<input type="hidden" data-id="${jdata.student_id}" value="0">
								</label><label class="ckbox-name">${jdata.student_name}</label>
							</div>
						</div>
					`;
		return shtml;
	}
	function bindUnLeave(jdata){
		var shtml = `
					<div class="tab-line">
						<div class="tab-line-master">
							<label class="checkbox">
								<i class="icon-square"></i>
							</label><label class="ckbox-name">${jdata.student_name}</label>
						</div>
						<div class="tab-line-slave color-cyan">
						</div>
						<div class="tab-line-slave color-light-red">
						</div>
						<div class="tab-line-slave color-orange">
							<label class="radio"><input type="radio" name="unleave_${jdata.student_id}" data-id="${jdata.student_id}" value="5"><i class="icon-radio"></i></label>
						</div>
					</div>
					`;
		return shtml;
	}
</script>
#end